<template>
  <div>
    <div class="to_json_button">
      <el-button size="mini" type="primary" @click="codeToJson">转换json</el-button>
      <span>编辑器本身支持javascript语法和语法提示，转换json功能用于匹配代码单双引号、缩进等</span>
    </div>
    <editor @init="editorInit" height="500" width="100%" v-model="editContent.data" lang="javascript" theme="monokai"></editor>
  </div>
</template>

<script>
import editor from "vue2-ace-editor-support-chinese";
import { jsonFormat } from "@/untils/jsonFormat";
export default {
  components: { editor },
  props: {
    editContent: {
      data: ""
    }
  },
  methods: {
    editorInit() {
      require("brace/mode/javascript");
      require("brace/theme/monokai");
    },
    codeToJson() {
      this.$emit('codeToJson',jsonFormat(this.editContent.data))
    }
  }
};
</script>

<style scoped>
.to_json_button {
  margin-bottom: 10px;
}
</style>